<template>
  <div class="school-card-box flex-col-center" @click="handleClick">
    <div class="school-card-img-box flex-col-center" >
      <div class="school-card-img-wrap">
        <el-image :src="school.schoolBadgeUrl" class="school-card-img">
          <div slot="error" class="image-slot">

            <i class="el-icon-picture-outline"></i>
          </div>
        </el-image>
      </div>
    </div>
    <div class="school-card-body flex-col-center" >
      <div>
        {{ school.schoolName }}
      </div>
      <slot :school="school" name="body">

      </slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "SchoolCard",
  props:{
    school:{
      type:Object,
      default:{
        url:"",
        name:"",

      }
    },
  },
  data(){
    return{

    }
  },
  methods:{
    handleClick(){
      // 抛出click事件
      this.$emit("click")
    }
  }
}
</script>

<style scoped lang="less">
  .school-card-box{
    font-size: 15px;
    border: 1px solid #bdbdbd;
    max-width: 15em;
    min-width: 6em;
    max-height: 15em;
    min-height: 12em;
    border-radius:3px;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    font-weight: 600;
    .school-card-img-box{
      flex: 1;

      .school-card-img-wrap{
        width: 60%;

        max-width: 9em;
        min-width: 5em;
        border-radius: 50%;
        overflow: hidden;
        .school-card-img{
          transition: all 0.3s;
          width: 100%;
          height: 100%;

        }

      }
    }
    .school-card-body{
      flex: 1;
      padding: 1px;

    }
    &:hover .school-card-img{
      transform: scale(1.1);
    }
    &:hover{
      border: 1px dashed deepskyblue;
      color: #0489b6;
    }
  }
</style>